<extend name="Public/usercenter"/>

<block name="body">
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/js/ext/webuploader/js/webuploader.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/js/ext/chosen/chosen.min.js"></script>
    <script src="__STATIC__/browser/jquery.browser.js"></script>
    <link href="__PUBLIC__/js/ext/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
    <link href="__PUBLIC__/js/ext/chosen/chosen.min.css" type="text/css" rel="stylesheet">
<style>
    .wu-example {
        position: relative;
        padding: 45px 15px 15px;
        margin: 15px 0;
        background-color: #fafafa;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
        border-color: #e5e5e5 #eee #eee;
        border-style: solid;
        border-width: 1px 0;
    }
    .wu-example:after {
        content:"上传列表";
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 12px;
        font-weight: bold;
        color: #bbb;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    @media (min-width: 768px) {
        .bs-example {
            margin-left: 0;
            margin-right: 0;
            background-color: #fff;
            border-width: 1px;
            border-color: #ddd;
            border-radius: 4px 4px 0 0;
            box-shadow: none;
        }
    }
    /*demo样式*/
    #filePicker {
        display: inline-block;
        line-height: 1.428571429;
        vertical-align: middle;
        margin: 0 12px 0 0;
    }
    #filePicker .webuploader-pick {
        padding: 6px 12px;
        display: block;
        background-color: #00b7ee;
        color: white;
    }
    #picker {
        display: inline-block;
        line-height: 1.428571429;
        vertical-align: middle;
        margin: 0 12px 0 0;
    }
    #picker .webuploader-pick {
        padding: 6px 12px;
        display: block;
        background-color: #00b7ee;
        color: white;
    }
    #uploader-demo{
        width: 100%;
    }

    #uploader-demo .thumbnail {
        width: 110px;
        height: 110px;
    }
    #uploader-demo .thumbnail img {
        width: 100%;
    }
    .uploader-list {
        overflow: hidden;
    }
    .file-item {
        float: left;
        position: relative;
        margin: 0 20px 20px 0;
        padding: 4px;
    }
    .file-item .error {
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        background: red;
        color: white;
        text-align: center;
        height: 20px;
        font-size: 14px;
        line-height: 23px;
    }
    .file-item .info {
        position: absolute;
        left: 4px;
        bottom: 4px;
        right: 4px;
        height: 20px;
        line-height: 20px;
        text-indent: 5px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        overflow: hidden;
        white-space: nowrap;
        text-overflow : ellipsis;
        font-size: 12px;
        z-index: 10;
    }
    .upload-state-done:after {
        content:"√";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 32px;
        position: absolute;
        bottom: 0;
        right: 4px;
        color: #4cae4c;
        z-index: 99;
    }
    .file-item .progress {
        position: absolute;
        right: 4px;
        bottom: 4px;
        height: 3px;
        left: 4px;
        height: 4px;
        overflow: hidden;
        z-index: 15;
        margin:0;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    .file-item .progress span {
        display: block;
        overflow: hidden;
        width: 0;
        height: 100%;
        background: #d14 repeat-x;
        -webit-transition: width 200ms linear;
        -moz-transition: width 200ms linear;
        -o-transition: width 200ms linear;
        -ms-transition: width 200ms linear;
        transition: width 200ms linear;
        -webkit-animation: progressmove 2s linear infinite;
        -moz-animation: progressmove 2s linear infinite;
        -o-animation: progressmove 2s linear infinite;
        -ms-animation: progressmove 2s linear infinite;
        animation: progressmove 2s linear infinite;
        -webkit-transform: translateZ(0);
    }
    @-webkit-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @-moz-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }

    a.travis {
        position: relative;
        top: -4px;
        right: 15px;
    }
</style>
    <div class="row">
        <form method="post" id="ajaxForm" role="form" class="form-horizontal">
            <table class="table table-form">
                <tr>
                    <td>
                        <legend>上传报告</legend>
                        <div class="form-group">
                            <label class="col-md-2 control-label">病人姓名</label>

                            <div class="col-md-4">
                                <select name="categories[]" id="categories" multiple="multiple"
                                        class="form-control chosen">
                                    <volist name="users" id="u">
                                        <option value="{$u.id}"> {$u.nickname}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label required">图片</label>

                            <div class="col-md-10">
                                <div id="uploader-demo" class="wu-example">
                                    <!--用来存放item-->
                                    <div id="fileList" class="uploader-list"></div>
                                    <div id="filePicker">选择图片</div>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">pdf</label>

                            <div class="col-md-10">
                                <div id="uploader" class="wu-example">
                                    <!--用来存放文件信息-->
                                    <div id="thelist" class="uploader-list"></div>
                                    <div class="btns">
                                        <div id="picker">选择文件</div>
                                        <!--<button id="ctlBtn" class="btn btn-default">开始上传</button>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label required">文档说明</label>
                            <div class="col-md-10">
                                <textarea name="content" id="content" rows="10" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <input type="submit" id="submit" class="btn btn-primary" value="保存"
                                       data-loading="稍候...">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
<script>
    $(function () {
        var $ = jQuery,
                $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

        // 缩略图大小
                thumbnailWidth = 100 * ratio,
                thumbnailHeight = 100 * ratio,

        // Web Uploader实例
                uploader;
         uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '__PUBLIC__/js/ext/webuploader/js/Uploader.swf',
            // 文件接收服务端。
            server: "{:U('Core/File/uploadPicture')}",
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');


            // $list为容器jQuery实例
            $list.append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            uploader.upload();
            toast.showLoading();
        });
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file,ret) {
            toast.hideLoading();
            $('#' + file.id).addClass('upload-state-done');
//            console.log(ret);
            if(ret.status==1){
                var filedata=ret.data.file;
                var path=filedata.path;
                path=path.split('\/Uploads\/');
                var li="<input type='hidden' name='pictures[]' value='/Uploads/"+ path[1]+"'  />"
                $list.append(li);
            }
        });

// 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                    $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        //pdf上传

    });

    // 文件上传
    jQuery(function() {
        var $ = jQuery,
                $list = $('#thelist'),
                $btn = $('#ctlBtn'),
                state = 'pending',
                uploader;

        uploader = WebUploader.create({

            // 不压缩image
            resize: false,
            auto: true,
            // swf文件路径
            swf: '__PUBLIC__/js/ext/webuploader/js/Uploader.swf',
            // 文件接收服务端。
            server: "{:U('Core/File/uploadFile')}",
            accept: {
                title: 'pdfs',
                extensions: 'pdf',
            },
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker'
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            $list.append( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function( file ,ret) {
//            console.log(ret);
            if(ret.status==1){
                var fileinfo=ret.data.file;
//                console.log(fileinfo);
                var path=fileinfo.savepath+ fileinfo.savename;
                var li="<input type='hidden' name='pdfs[]' value='"+ path+"'  />";
                $list.append(li);
            }
            $( '#'+file.id ).find('p.state').text(ret.info);
        });

        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });

        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }

            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
    });

    $(document).ready(function()
    {
        $(".chosen").chosen({no_results_text: '没有匹配的选项', placeholder_text:' ', disable_search_threshold: 10, width: '100%', search_contains: true});
    });
    //将form转为AJAX提交
    function ajaxSubmit(frm, fn) {
        var dataPara = getFormJson(frm);
        $.ajax({
            url: frm.action,
            type: frm.method,
            data: dataPara,
            success: fn
        });
    }

    //将form中的值转换为键值对。
    function getFormJson(frm) {
        var o = {};
        var a = $(frm).serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });

        return o;
    }
    $(document).ready(function(){
        $('#ajaxForm').bind('submit', function(){
            var categories = $('#categories').val();
            var content = $('#content').val();
            if (categories.length > 1) {
                alert('只选择一个用户');
                return false;
            }
            if (categories.length < 1) {
                alert('请至少选择1个用户!');
                return false;
            }
            if(content.length<=5){
                alert('请至少写入5个文字,方便你查阅时,快速了解上传报告的内容!');
                return false;
            }
            ajaxSubmit(this, function (data) {
                console.log(data);
                if(data.status==1){
                    toast.success(data.info,'温馨提示');
                    if(data.url!= undefined)
                    setTimeout(function(){
                        window.location.href=data.url;
                    },1000);
                }else
                    toast.error(data.info,'温馨提示');
            });
            return false;
        });
    });
</script>
</block>